<template>
    <div class="user-management">
      <div class="admin-page-header">
        <h2><i class="fas fa-users"></i> 用户管理</h2>
        <button class="btn btn-primary" @click="refreshUsers">
          <i class="fas fa-sync-alt"></i> 刷新
        </button>
      </div>
      
      <div class="admin-table-container">
        <table class="admin-table">
          <thead>
            <tr>
              <th>ID</th>
              <th>用户名</th>
              <th>邮箱</th>
              <th>注册时间</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in users" :key="user.id">
              <td>{{ user.user_id }}</td>
              <td>{{ user.username }}</td>
              <td>{{ user.email || '-' }}</td>
              <td>{{ formatDate(user.created_at) }}</td>
              <td>
                <span :class="['status-badge', user.is_active ? 'active' : 'inactive']">
                  {{ user.is_active ? '活跃' : '禁用' }}
                </span>
              </td>
              <td>
                <button class="btn btn-sm btn-edit" @click="editUser(user)">
                  <i class="fas fa-edit"></i> 编辑
                </button>
                <button class="btn btn-sm btn-danger" @click="confirmDelete(user)">
                  <i class="fas fa-trash"></i> 删除
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        
        <div v-if="loading" class="loading-overlay">
          <i class="fas fa-spinner fa-spin"></i> 加载中...
        </div>
        
        <div v-if="!loading && users.length === 0" class="empty-message">
          <i class="fas fa-user-slash"></i>
          <p>暂无用户数据</p>
        </div>
      </div>
  
      <!-- 编辑用户模态框 -->
      <AdminModal v-if="showEditModal" @close="showEditModal = false">
        <template #header>
          <h3>编辑用户</h3>
        </template>
        
        <UserEditForm 
          :user="currentUser"
          @save="handleSaveUser"
          @cancel="showEditModal = false"
        />
        
        <template #footer>
          <button class="btn btn-primary" @click="handleSaveUser(currentUser)">
            <i class="fas fa-save"></i> 保存
          </button>
        </template>
      </AdminModal>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { userApi } from '@/api/api'
  import AdminModal from '@/components/admin/AdminModal.vue'
  import UserEditForm from '@/components/admin/UserEditForm.vue'
  
  const users = ref([])
  const loading = ref(false)
  const showEditModal = ref(false)
  const currentUser = ref(null)
  
  // 获取用户列表
  const fetchUsers = async () => {
    try {
      loading.value = true
      const response = await userApi.getUserInfo()
      // 根据您的API响应结构调整
      users.value = response?.users || response || []
    } catch (error) {
      console.error('获取用户列表失败:', error)
    } finally {
      loading.value = false
    }
  }
  
  // 刷新用户列表
  const refreshUsers = () => {
    fetchUsers()
  }
  
  // 编辑用户
  const editUser = (user) => {
    currentUser.value = { ...user }
    showEditModal.value = true
  }
  
  // 保存用户修改
  const handleSaveUser = async (updatedUser) => {
    try {
      await userApi.updateUserInfo(updatedUser)
      showEditModal.value = false
      refreshUsers()
    } catch (error) {
      console.error('更新用户失败:', error)
    }
  }
  
  // 确认删除用户
  const confirmDelete = (user) => {
    if (confirm(`确定要删除用户 ${user.username} 吗？`)) {
      deleteUser(user.id)
    }
  }
  
  // 删除用户
  const deleteUser = async (userId) => {
    try {
      // 根据您的API调整删除方法
      await userApi.deleteUser({ user_id: userId })
      refreshUsers()
    } catch (error) {
      console.error('删除用户失败:', error)
    }
  }
  
  // 格式化日期
  const formatDate = (dateString) => {
    if (!dateString) return '-'
    return new Date(dateString).toLocaleString()
  }
  
  // 初始化获取数据
  onMounted(() => {
    fetchUsers()
  })
  </script>
  
  <style scoped>
  .user-management {
    padding: 20px;
  }
  
  .admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .admin-page-header h2 {
    color: #2c3e50;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .admin-table-container {
    position: relative;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    min-height: 200px;
  }
  
  .admin-table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .admin-table th {
    background-color: #f8f9fa;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
  }
  
  .admin-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
  }
  
  .admin-table tr:hover {
    background-color: #f5f7fa;
  }
  
  .status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
  }
  
  .status-badge.active {
    background-color: #e6f7ee;
    color: #28a745;
  }
  
  .status-badge.inactive {
    background-color: #fef0f0;
    color: #dc3545;
  }
  
  .btn {
    padding: 6px 12px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s;
  }
  
  .btn-sm {
    padding: 4px 8px;
    font-size: 12px;
  }
  
  .btn-primary {
    background-color: #3498db;
    color: white;
  }
  
  .btn-primary:hover {
    background-color: #2980b9;
  }
  
  .btn-edit {
    background-color: #f8f9fa;
    color: #495057;
    margin-right: 5px;
  }
  
  .btn-edit:hover {
    background-color: #e9ecef;
  }
  
  .btn-danger {
    background-color: #fef0f0;
    color: #dc3545;
  }
  
  .btn-danger:hover {
    background-color: #fde8e8;
  }
  
  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    z-index: 10;
  }
  
  .empty-message {
    padding: 40px;
    text-align: center;
    color: #7f8c8d;
  }
  
  .empty-message i {
    font-size: 2rem;
    margin-bottom: 10px;
    opacity: 0.5;
  }
  </style>